<template>
  <div  v-loading="loading" element-loading-text="正在上传..." :style="{height:loading?'340px':null}">
      <el-upload :ref="refName"  :action="videoActionUrl" :on-success="uploadSuccess" 
      :on-remove="handleRemoveVideo" :on-progress="handProgress" :show-file-list="false" 
      :auto-upload="true" :limit="1" :on-error="uploadError"
      :on-exceed="exceed" :disabled="disabled">
        <el-button slot="trigger" size="small" type="primary" plain class="mr-1" :disabled="disabled">上传视频</el-button>
        <el-button size="small" type="danger" @click="clearUpload" :disabled="disabled">移除</el-button>
      </el-upload>
      <br/>
      <video v-if='videoSrc'  ref="videoBox" id="testVideo"  class="video-js"  height="300px" preload="auto" controls="" :src="videoSrc"></video>
  </div>
</template>
<script>
import videoApi from 'plugins/myaxios/video/video.js';
export default {
    name:'uploadVideo',
    props:{
      videoActionUrl:{
        type:String,
        default:videoApi.uploadPathForVideo()
      },
      videoSrc:{
        type:String
      },
      refName:{
        type:String
      },
      disabled:{
        type:Boolean,
        default:false
      }
    },
    data() {
        return {
         loading:false
        }
    },
    created(){},
    methods:{
        //上传视频成功
        uploadSuccess(response, file, fileList) {
            let self = this;
            self.videoSrc= response.content;
            this.loading=false;
            self.$emit('uploadSuccess', {url:response.content});
        },
        //上传视频失败
        uploadError(err,file, fileList){
          this.loading=false;
          this.$message.error(err)
        },
        /**删除视频*/ 
        handleRemoveVideo (file,fileList) { 
          this.$refs.upload.clearFiles()
        },
        /**正在上传状态**/ 
        handProgress (file) {
          this.loading=true
        },
        /**移除视频*/ 
        clearUpload() {
          this.$refs[this.refName].clearFiles()
          this.$emit('clearVideo');
        },
        exceed(file, fileList){
          this.$message({
            message: '只能上传一个视频，请移除后再上传',
            type: 'warning'
          })
        }
    }
}
</script>